<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
			#test1{
				text-indent: 2em;
			}
			#test2{
				text-align: center;
			}
			#test3{
				text-decoration: underline;
			}
			#test4{
				text-decoration: line-through;
			}
			#test5{
				text-transform:capitalize;
			}
			.test1{
				text-transform: uppercase;
			}
			.test2{
				text-transform: lowercase;
			}
			#test6{
				text-shadow: 50px 10px 1px blue;
			}
			.test3{
				text-overflow: ellipsis;
				overflow: hidden;
				border: #000000 1px solid;
				width: 250px;
				white-space: nowrap;
			}
			.test4{
				border: #000000 1px solid;
				width: 250px;
				word-break: break-all;
			}
			.test5{
				border: #000000 1px solid;
				width: 250px;
				word-break: keep-all;
			}
			.test6{
				border: #000000 1px solid;
				width: 250px;
				white-space: normal;
			}
			
		</style>
	</head>
	<body>
		<div id="test1">首行缩进两个字符</div>
		<div id="test2">这是居中文本</div>
		<div id="test3">这是下划线样式</div>
		<div id="test4">这是删除线</div>
		<div id="test5">my name is 首字母大写</div>
		<div class="test1">aabb字母全大写</div>
		<div class="test2">AABB字母全小写</div>
		<hr>
		<div class="test4">允许西文在中间换行aaaaaaaaaaaaaaaaaa</div>
		<div class="test5">不允许西文在中间换行bbbbbbbbbbbbbbbbbbbbbb ccc直接溢出,直到空格或者连接符或标点.主要适用于英文.</div>
		<div class="test6">强制中文不换行，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
		<div class="test3">
			<a href="#">这是被裁剪的新闻标题：巴拉巴拉巴拉巴拉</a><br/>
			<a href="#">这是被裁剪的新闻标题：巴拉巴拉巴拉巴拉</a><br/>
			<a href="#">这是被裁剪的新闻标题：巴拉巴拉巴拉巴拉</a><br/>
			<a href="#">这是被裁剪的新闻标题：巴拉巴拉巴拉巴拉</a><br/>
			<a href="#">这是被裁剪的新闻标题：巴拉巴拉巴拉巴拉</a><br/>
		</div>
		
		<div id="test6">这是文本阴影:(x,y,模糊半径：越大越模糊,阴影颜色)</div>
		<h2>黑白色1px阴影来实现凹凸文字</h2>
	</body>
</html>
